<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS </title>
        <!--
      CSS选择器的优先级别:
      1.在相同类型的选择器中,遵循:a.就近原则 b.叠加原则
      2.排序:
       复合选择器 > id选择器 > 类选择器 >  标签选择器
      3.范围越小,优先级别就越高
    -->
    <style>
        /* 后代选择器 */
        ol li {
            color: red;
        }

        /* 标签选择器 */
        p {
            color: blue;
        }

        /* 通过类找到li的子标签a */
        .nav li a {
            color: yellowgreen;
        }

        /* 亲子选择器 */
        div>a {
            color: teal;
        }
         /*复合选择器*/
         div#main{ /*101*/
            color: purple;
        }
        /*id选择器*/
        #main{ /*100*/
            color: goldenrod;
        }

        /*类选择器*/
        .two{ /*10*/
            color: deeppink;
        }

        .one{ /*10*/
            color: orangered;
        }
        /*标签选择器*/
        div{ /*1*/
            color: red;
        }

        div{ /*1*/
            color: green;
        }

        div{ /*1*/
            color: blue;
            font-size: 100px;
        }

        /*通配符*/
        *{ /*1000*/
           color: cadetblue !important;
        }
    </style>
</head>

<body>
    <div id="main" class="one two" style="color: red;">1111111</div>

    <p>选择器：标签选择器、后代选择器</p>

    <p>后代选择器又称包含选择器，元素1是父标签，元素2是元素1的子标签，中间用空格隔开，修改的样式只是子标签也就是元素2，不影响元素1的样式</p>
    <code>元素1 元素2 ｛样式声明｝</code>
    <p>子代选择器只选择作为某一元素的最近一级子元素，简单理解为亲子元素，而非所有后代,用大于号表示</p>
    <code>元素1>元素2 ｛样式声明｝</code>
    <p>并集选择器，元素间使用逗号隔开，表示这几个元素使用相同的样式，规范是将多个元素分多行，防止元素过多放在一行中不变查看。</p>
    <code>元素1,
        元素2 ｛样式声明｝</code>
    <ol>
        <li>ol 的 子元素1</li>
        <li>ol 的 子元素1</li>
        <li>ol 的 子元素3</li>
    </ol>
    <ul class="nav">
        <li>ul 的 li 元素1</li>
        <li>ul 的 li 元素2</li>
        <li>ul 的 li 元素3</li>
        <li><a href="https://www.bilibili.com/video/BV1pE411q7FU?p=97">2021-1-25 进度</a> ul 的 li 元素3</li>
    </ul>
    <div>
        <a href="#">div的子标签</a>
        <p><a href="#">p的子标签，p又是div的子标签</a></p>
    </div>
</body>

</html>